{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}机架管理{% endblock %}

{% block css %}

<!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables/dataTables.bootstrap.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
  <!-- AdminLTE Skins. Choose a skin from the css/skinsfolder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

{% endblock %}

{% block content %}

    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
       机架管理
      </h1>
      <ol class="breadcrumb">
        <li><a href={% url 'dashboard' %}><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">机架管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
      
        <form action={% url 'cabinet' %}  method="get">
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">编号</label>
                  <textarea id='name' rows='1' class="form-control" name='name'></textarea>
                </div>
                <div class="col-xs-4">
                  <label for="search">机房</label>
                  <input type="text" class="form-control" name='datacenter'>
                </div>
                <div class="col-xs-4">
                  <label for="search">机房管理单元</label>
                  <input type="text" class="form-control" name='room'>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-xs-2">
                  <label for="search">高度(U)</label>
                  <input type="text" class="form-control" name='slotcount'>
                </div>
                <div class="col-xs-2">
                  <label for="search">是否开电</label>
                  <select class="form-control" name='status' id='status'>
                    <option selected value></option>
                    <option value='0'>是</option>
                    <option value='1'>否</option>
                  </select>  
                </div>
                <div class="col-xs-2">
                  <label for="search">电力(A)</label>
                  <input type="text" class="form-control" name='power'>
                </div>
                <div class="col-xs-2">
                  <label for="search">是否自用</label>
                  <select class="form-control" name='user' id='user'>
                    <option selected value></option>
                    <option value='0'>是</option>
                    <option value='1'>否</option>
                  </select>
                </div>
                <div class="col-xs-2">
                  <label for="search">备注</label>
                  <input type="text" class="form-control" name='memo'>
                </div>
              </div>
            </div>      
            <p style=" margin:0 auto; text-align:center;">
              <button type="submit" id="searchbutton" align="center" class="btn">查询</button>
            </p>
           </form>
    <div class="row">
    <div class="col-xs-12">

      <div class="box">
        <div class="box-header">
          <h4 class="box-title">查询结果</h4>
          <button type="submit" class="btn btn-default pull-right" onclick="window.open( {% url 'cabinetimport' %} )">机柜导入</button>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <table id="assets_table" class="display table table-bordered table-striped">
            <thead>
            <tr>
              <th>编号</th>
              <th>机房</th>
              <th>机房管理单元</th>
              <th>高度(U)</th>
              <th>是否自用</th>
              <th>是否开电</th>
              <th>电力(A)</th>
              <th>备注</th>
            </tr>
            </thead>
            <tbody>
                {% for cabinet in cabinet %}
                <tr>
                  <td><a href="{% url 'cabinetdetail' cabinet.id %}" target=_blank>{{ cabinet.name }}</td>
                  <td>{{ cabinet.room.datacenter }}</td>
                  <td>{{ cabinet.room }}</td>
                  <td>{{ cabinet.slotcount }}</td>
                  <td>{{ cabinet.get_user_display }}</td>
                  <td>{{ cabinet.get_status_display }}</td>
                  <td>{{ cabinet.power }}</td>
                  <td>{{ cabinet.memo }}</td>
                </tr>
                {% empty %}
                  <tr>没有数据！</tr>
                {% endfor %}
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
    </div>
    <!-- /.row -->
    </section>

{% endblock %}

{% block script %}
    <!-- DataTables -->
    <script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
    <script src="{% static 'plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
    <!-- SlimScroll -->
    <script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
    <!-- FastClick -->
    <script src="{% static 'plugins/fastclick/fastclick.min.js' %}"></script>
    <!-- AdminLTE App -->
    <script src="{% static 'dist/js/adminlte.min.js' %}"></script>
    <!-- AdminLTE for demo purposes -->
    <script src="{% static 'dist/js/demo.js' %}"></script>
    <script src="../static/js/myjs.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js"></script>
    <link rel="stylesheet" href="{% static 'plugins/datatables/jquery.dataTables.min.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/datatables/buttons.dataTables.min.css' %}">
    <!-- page script -->
    <script>
    $(document).ready(function() {
    $('#assets_table').DataTable( {
        dom: 'lBfrtip',
        buttons: [
        {
            extend: 'excel',
            text: '导出当前页',
            exportOptions: {
                modifier: {
                    page: 'current'
                }
            }
        },
        {
            extend: 'excel',
            text: '导出所有',
        }
    ]
    } );
} );
    </script>
<script>
  var name = getUrlParameter('name');
  $("#name").val(name);
  var datacenter = getUrlParameter('datacenter');
  $("input[name='datacenter']").val(datacenter);
  var room = getUrlParameter('room');
  $("input[name='room']").val(room);
  var slotcount = getUrlParameter('slotcount');
  $("input[name='slotcount']").val(slotcount);
  var status = getUrlParameter('status');
  $("#status").val(status);
  var power = getUrlParameter('power');
  $("input[name='power']").val(power);
  var user = getUrlParameter('user');
  $("#user").val(user);
  var memo = getUrlParameter('memo');
  $("input[name='memo']").val(memo);  
</script>
{% endblock %}
